<template>
    <div class="first-source">
        <div class="alert alert-info my-alert animated bounceInUp" v-if="isShow">
            <strong>复制成功</strong>
        </div>
        <div class="source-header">
            <p class="source-header-title animated shake">好看电影</p>
        </div>
        <div class="source-content">
            <div class="row">
                <div class="col-sm-6 col-md-4" v-for="item in moviesList" :key="item.id">
                    <div class="thumbnail">
                        <img :src="item.img_url" alt="...">
                        <div class="caption source-intro">
                            <h4>{{item.name}}</h4>
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-control"
                                   :value="item.link_download"
                            >
                            <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"
                                            v-clipboard:copy="item.link_download"
                                            v-clipboard:success="onCopy"
                                            v-clipboard:error="onError"
                                    >复制链接</button>
                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {moviesList} from './list.js'

    export default {
        name: "Movie",
        data() {
            return {
                moviesList: [],
                isShow: false
            }
        },
        created() {
            this.getMovieList();
        },
        methods: {
            getMovieList(){
                this.getAxios('/movie/all').then(res=>{
                    console.log(res);
                    this.moviesList = res.list;
                })
            },
            onCopy: function (e) {
                this.isShow = true;
                let time = setTimeout(() => {
                    this.isShow = false
                }, 4000)
            },
            onError: function (e) {
                alert('Failed to copy texts')
            }
        }
    }
</script>
<style lang="less">
    .first-source {
        position: relative;

        .my-alert {
            width: 30%;
            position: fixed;
            top: 20px;
            right: 10px;
        }
    }
</style>